<template>
  <div class="header">
    <div class="left">
      <el-icon :size="24" @click="changeCollapse"><Menu /></el-icon>
      <div class="title">博客后台管理系统</div>
    </div>
    <div class="right">
      <div>欢迎{{ commonStore.user.username }}回来！</div>
      <el-popover class="box-item" placement="top-start" width="80px">
        <template #reference>
          <div>
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </div>
        </template>

        <template #default>
          <div class="popover">
            <div @click="toCenter">
              <el-link :underline="false">个人中心 </el-link>
            </div>
            <div @click="loginOut">
              <el-link :underline="false"> 退出登陆</el-link>
            </div>
          </div>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<script name="header" setup>
import { Menu } from "@element-plus/icons-vue";
import { useCommonStore } from "@/store/common";
import { useRouter } from "vue-router";
const router = useRouter();
const commonStore = useCommonStore();
const changeCollapse = () => {
  console.log("changes", commonStore.isCollapse);
  commonStore.changeIsCollapse(); // 点击图标侧边是否折叠改变
};
const toCenter = () => {
  router.push({
    path: "/mainBox/user",
  });
};
const loginOut = () => {
  console.log("点击退出登陆");
};
</script>

<style scoped>
.header {
  color: #fff;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 5px;
  .left {
    padding-left: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .title {
      margin-left: 10px;
    }
  }
  .right {
    padding-right: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
